 <!--介绍-->
    <div id="q1" style="display: block;" class="know">
        <div class="wraper">
            <header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden;">
                <div id="scroll_pic_view_div" style="width: 3840px; -webkit-transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform-origin: 0px 0px 0px; transform: translate(-1920px, 0px) scale(1) translateZ(0px);">
                    <ul id="scroll_pic_view_ul">
                        <volist name="introduce.pic" id="pic_path">
                            <li style="width: 100%;">
                                <a onclick="return false;">
                                    <img src="{$pic_path}">
                                </a>
                            </li>
                        </volist>
                    </ul>
                </div>
                <div>
                    <ol id="scroll_pic_nav" class="scroll_pic_nav">
                        <script>
                            (function(d, $){
                                var scrollPicView = d.getElementById("scroll_pic_view"),
                                        scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
                                        lis = scrollPicViewDiv.querySelectorAll("li"),
                                        w = scrollPicView.offsetWidth,
                                        len = lis.length;
                                for(var i=0; i<len; i++){
                                    lis[i].style.width = w+"px";
                                    if(i == len-1){
                                        scrollPicViewDiv.style.width = w * len + "px";
                                    }
                                }

                                var scroll_pic_view = new iScroll('scroll_pic_view', {
                                    snap: true,
                                    momentum: false,
                                    hScrollbar: false,
                                    useTransition: true,
                                    onScrollEnd: function() {
                                        $("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
                                        //$("#scroll_pic_nav li.on").prev().addClass("left");
                                        //$("#scroll_pic_nav li.on").next().removeClass("left");

                                        var  list=$("#scroll_pic_nav li");
                                        for(var k=0;k<list.length;k++){
                                            if(k<this.currPageX)
                                                $(list[k]).addClass("left");
                                            else
                                                $(list[k]).removeClass("left");
                                        }
                                    }
                                });
                                //
                                var nav_lis = new Array(lis.length);
                                d.write('<li class="on"><span></span></li>');
                                for(var i=1; i<nav_lis.length; i++){
                                    d.write("<li><span></span></li>");
                                }
                            })(document, $);
                        </script>
                    </ol>
                </div>
            </header>
        </div>
        <div class="knowInfo">
            <div>
                {$introduce.content}
            </div>
        </div>
    </div>